<template>
    <div class="wrap_item" @click="">
      <div class="img_zhezhao">
        <img :src="baseurl + item.xxx" class="wrap_img">
      </div>
      <div class="wrap_img_text">
        <img src="../../../assets/icons/play_icon.png" class="wrap_icon">
        <div class="wrap_img_text1">
          {{ albumPlayCount }}
        </div>
      </div>
      <div class="text-container">
        <p class="wrap_text ellipsis-text">{{ item.xxx }}</p>
      </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const baseurl = 'https://imagev2.xmcdn.com/'
const props = defineProps<{
  item:any
}>()

const formatNumber = (number:number) => {
  if (number >= 100000000) {
    return (number / 100000000).toFixed(2) + ' 亿';
  } else if (number >= 10000) {
    return (number / 10000).toFixed(2) + ' 万';
  } else {
    return number.toString();
  }
}
const albumPlayCount = computed(()=>{
  let albumPlayCount = formatNumber(props.item.albumPlayCount)
  return albumPlayCount
})
</script>

<style scoped lang="less">
.wrap_item{
  width: 103px;
  height: 173px;
}
.img_zhezhao{
  position: relative;
  float: left;
  top: 10px;
  width: 103px;
  height: 103px;
  border-radius: 8px;
  display: block;
  background-color: #050000;
  z-index: 20;
  
}
.wrap_img{
  position: absolute;
  width: 103px;
  height: 103px;
  border-radius: 6px;
  opacity: 0.9;
}
.wrap_icon{
  width: 15px;
  height: 15px;
  position: relative;
  left: -38px;
}
.wrap_img_text{
  position: relative;
  top: -12px;
  width: 103px;
  height: 28px;
  font-size: 12px;
  text-align: center;
  line-height: 28px;
  color: #fff;
  z-index: 100;
}
.wrap_img_text1{
  position: relative;
  top: -30px;
  color: #fdfbfb;
}
.wrap_text{
  width: 103px;
  height: 53px;
  font-size: 13px;
  color: #333;
  margin-top: 90px;
}
.text-container p{
  width: 100px; /* 调整容器宽度 */
  height: 26px;
  overflow: hidden;
}
.ellipsis-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 控制显示的行数 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
</style>